import React from 'react';

import {
  Input as AntdInput,
  Switch as AntdSwitch,
  Select as AntdSelect,
  InputNumber as AntdInputNumber,
  Button as AntdButton,
  Radio as AntdRadio,
  Checkbox as AntdCheckbox,
} from 'antd';

/**高阶表单组件：
 * 功能：批量处理所有的form填写控件
 * disabled:disabled属性，方便控制是否能编辑
 * 应用场景：流程管理-右侧-属性配置
 */
export const CustomFormItemsHoc = ({ disabled = false }) => {
  // antd组件：转换为===>包含禁用属性的高阶组件
  const newComponents = {
    Input: CustomFormItemHoc(AntdInput, disabled),
    TextArea: CustomFormItemHoc(AntdInput.TextArea, disabled),
    Switch: CustomFormItemHoc(AntdSwitch, disabled),
    Select: CustomFormItemHoc(AntdSelect, disabled),
    Option: AntdSelect.Option,
    InputNumber: CustomFormItemHoc(AntdInputNumber, disabled),
    Radio: CustomFormItemHoc(AntdRadio, disabled),
    RadioGroup: AntdRadio.Group,
    Checkbox: CustomFormItemHoc(AntdCheckbox, disabled),
    Button: CustomFormItemHoc(AntdButton, disabled),
  };
  return newComponents;
};

/**高阶组件：
 * 传入控件，添加disabled属性，并返回 */
const CustomFormItemHoc = (WrappedComponent: any, disabled: boolean) =>
  React.forwardRef((props: any, ref: any) => (
    <WrappedComponent disabled={disabled} {...props} ref={ref} />
  ));
